<template>
    <div class="base-panel">
        <div v-for="(i, index) in baseInfo" :key="index" class="base-panel-item">
            <div class="base-panel-title">{{i.title}}</div>
            <div class="data" :style='"color:"+colorMap[index]'>{{i.data}}</div>
        </div>
    </div>
</template>

<script>
    const colorMap = ['#07FFFF', '#FF4A47', '#F8733B', '#0DB5F7', '#07FFFF', '#FF4A47']
    export default {
        name: "BasePanel",
        props: ['baseInfo'],
        data(){
            return{
                colorMap:colorMap
            }
        },
        mounted() {
            console.log(this.baseInfo)
        }
    }
</script>

<style scoped lang="less">
    .base-panel {
        width: 380px;
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0 10px;
        box-sizing: border-box;
        border-top: none;
        position: relative;
        .base-panel-item {
            display: flex;
            box-sizing: border-box;
            flex: 1;
            width: 33.3%;
            min-width: 33.3%;
            max-width: 33.3%;
            flex-direction: column;
            align-items: flex-start;
            padding: 0 20px;
            margin-bottom: 10px;
            .base-panel-title{
                color: #fff;
                margin-bottom: 7px;
                font-size: 14px;
            }
            .data{
                font-family: ziticqtezhanti;
                font-size: 20px;
                line-height: 26px;
                white-space: nowrap;
            }
            &:nth-child(1),&:nth-child(2),&:nth-child(4){
                border-right: 1px solid rgba(55,55,55,1);
            }
            /*&:last-child{*/
            /*    border-left:  1px solid red;;*/
            /*}*/
        }

    }
</style>
